// ------------------------------------------------------------
// Icons
//
// Defined the @font-face rule for the icon font, as well as
// the base styles for when using icons.
// Includes the mixins for adding icons directly and the
// variables for each icon.
//
// * Font-face rule
// * Base styled for icons
// * Base styled for icons
// * The Icon (before) Mixin
// * The Icon (after) Mixin
// * Icon Variables
// * Icon Class Styles
// * Icon Classes
// * Div-based Icon Classes
// ------------------------------------------------------------


//
// Font-face rule
// Icon-font is generated by http://icomoon.co
// Pictos, by Drew Wilson - http://pictos.cc/
// --------------------------------------------------

@font-face {
    font-family: 'GhostIcons';
    src:url('../fonts/icons.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


//
// Base styled for icons
// --------------------------------------------------

%icon-base {
    font-family: "GhostIcons";
    font-weight: normal;
    font-style: normal;
    vertical-align: -7%;
    text-transform:none;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


//
// The Icon (before) Mixin
// --------------------------------------------------

@mixin icon($char, $size: '', $color: '') {
    &:before {
        @extend %icon-base;

        content: '#{$char}';
        @if $size != '' {
            font-size: $size;
        }
        @if $color != '' {
            color: $color;
        }
        @content;
    }

    &:hover {
        text-decoration:none;
    }
}

//
// The Icon (after) Mixin
// --------------------------------------------------

@mixin icon-after($char, $size: '', $color: '') {
    &:after {
        @extend %icon-base;

        content: '#{$char}';
        @if $size != '' {
            font-size: $size;
        }
        @if $color != '' {
            color: $color;
        }
        @content;
    }

    &:hover {
        text-decoration:none;
    }
}


//
// Icon Variables
// --------------------------------------------------
// For accessibility, icon characters in the icon font are stored in Unicode's
// Private Use Area characters. This means that screen readers won't attempt to
// read them out loud.
//

// Placeholder
$i:                 \e018;

// Icons
$i-ghost:           \e000;
$i-ghost-logo:      \e600;
$i-chevron-down:    \e001;
$i-users:           \e002;
$i-tag:             \e003;
$i-tablet:          \e004;
$i-menu:            \e005;
$i-settings:        \e006;
$i-search:          \e007;
$i-search-left:     \e008;
$i-rss:             \e009;
$i-preview:         \e00a;
$i-app:             \e00b;
$i-pin:             \e00c;
$i-pc:              \e00d;
$i-pacman:          \e00e;
$i-edit:            \e00f;
$i-mobile:          \e010;
$i-image:           \e011;
$i-mail:            \e012;
$i-list:            \e013;
$i-info:            \e014;
$i-home:            \e015;
$i-grid:            \e016;
$i-fullscreen:      \e017;
$i-question:        \e018;
$i-external:        \e019;
$i-error:           \e01a;
$i-comments:        \e01b;
$i-close:           \e01c;
$i-chevron:         \e01d;
$i-chevron-left:    \e11d;
$i-calendar:        \e01e;
$i-archive:         \e01f;
$i-services:        \e020;
$i-appearance:      \e021;
$i-video:           \e022;
$i-trash:           \e023;
$i-reply:           \e024;
$i-stats:           \e025;
$i-featured:        \e026;
$i-unfeatured:      \e027;
$i-clock:           \e028;
$i-settings2:       \e029;
$i-camera:          \e02a;
$i-power:           \e02b;
$i-lock:            \e02c;
$i-content:         \e02d;
$i-user:            \e02e;
$i-support:         \e02f;
$i-success:         \e030;
$i-notification:    \e031;
$i-add:             \e032;
$i-check:           \e033;
$i-x:               \e034;
$i-link:            \e035;
$i-camera:          \e036;
$i-repost:          \e037;
$i-weather-rain:    \e038;
$i-weather-sun:     \e039;
$i-weather-partial: \e03a;
$i-weather-snow:    \e03b;
$i-weather-cloudy:  \e03c;
$i-lightning:       \e03d;
$i-code:            \e03e;
$i-atom:            \e601;
$i-compass:         \e602;


//
// Icon Class Styles
// --------------------------------------------------

[class*=icon-] {
    &:before {
        @extend %icon-base;
    }

    &:hover {
        text-decoration: none;
    }
}


//
// Icon Classes
// --------------------------------------------------

.icon-ghost:before {
    content: '#{$i-ghost}';
}
.icon-ghost-logo:before {
    content: '#{$i-ghost-logo}';
}
.icon-chevron-down:before {
    content: '#{$i-chevron-down}';
}
.icon-users:before {
    content: '#{$i-users}';
}
.icon-tag:before {
    content: '#{$i-tag}';
}
.icon-tablet:before {
    content: '#{$i-tablet}';
}
.icon-menu:before {
    content: '#{$i-menu}';
}
.icon-settings:before {
    content: '#{$i-settings}';
}
.icon-search:before {
    content: '#{$i-search}';
}
.icon-search-left:before {
    content: '#{$i-search-left}';
}
.icon-rss:before {
    content: '#{$i-rss}';
}
.icon-preview:before {
    content: '#{$i-preview}';
}
.icon-app:before {
    content: '#{$i-app}';
}
.icon-pin:before {
    content: '#{$i-pin}';
}
.icon-pc:before {
    content: '#{$i-pc}';
}
.icon-pacman:before {
    content: '#{$i-pacman}';
}
.icon-edit:before {
    content: '#{$i-edit}';
}
.icon-mobile:before {
    content: '#{$i-mobile}';
}
.icon-image:before {
    content: '#{$i-image}';
}
.icon-mail:before {
    content: '#{$i-mail}';
}
.icon-list:before {
    content: '#{$i-list}';
}
.icon-info:before {
    content: '#{$i-info}';
}
.icon-home:before {
    content: '#{$i-home}';
}
.icon-grid:before {
    content: '#{$i-grid}';
}
.icon-fullscreen:before {
    content: '#{$i-fullscreen}';
}
.icon-question:before {
    content: '#{$i-question}';
}
.icon-external:before {
    content: '#{$i-external}';
}
.icon-error:before {
    content: '#{$i-error}';
}
.icon-comments:before {
    content: '#{$i-comments}';
}
.icon-close:before {
    content: '#{$i-close}';
}
.icon-chevron:before {
    content: '#{$i-chevron}';
}
.icon-chevron-left:before {
    content: '#{$i-chevron-left}';
}
.icon-calendar:before {
    content: '#{$i-calendar}';
}
.icon-archive:before {
    content: '#{$i-archive}';
}
.icon-services:before {
    content: '#{$i-services}';
}
.icon-appearance:before {
    content: '#{$i-appearance}';
}
.icon-video:before {
    content: '#{$i-video}';
}
.icon-trash:before {
    content: '#{$i-trash}';
}
.icon-reply:before {
    content: '#{$i-reply}';
}
.icon-stats:before {
    content: '#{$i-stats}';
}
.icon-featured:before {
    content: '#{$i-featured}';
}
.icon-unfeatured:before {
    content: '#{$i-unfeatured}';
}
.icon-clock:before {
    content: '#{$i-clock}';
}
.icon-settings2:before {
    content: '#{$i-settings2}';
}
.icon-camera:before {
    content: '#{$i-camera}';
}
.icon-power:before {
    content: '#{$i-power}';
}
.icon-lock:before {
    content: '#{$i-lock}';
}
.icon-content:before {
    content: '#{$i-content}';
}
.icon-user:before {
    content: '#{$i-user}';
}
.icon-support:before {
    content: '#{$i-support}';
}
.icon-success:before {
    content: '#{$i-success}';
}
.icon-notification:before {
    content: '#{$i-notification}';
}
.icon-add:before {
    content: '#{$i-add}';
}
.icon-check:before {
    content: '#{$i-check}';
}
.icon-x:before {
    content: '#{$i-x}';
}
.icon-link:before {
    content: '#{$i-link}';
}
.icon-camera:before {
    content: '#{$i-camera}';
}
.icon-repost:before {
    content: '#{$i-repost}';
}
.icon-weather-rain:before {
    content: '#{$i-weather-rain}';
}
.icon-weather-sun:before {
    content: '#{$i-weather-sun}';
}
.icon-weather-partial:before {
    content: '#{$i-weather-partial}';
}
.icon-weather-snow:before {
    content: '#{$i-weather-snow}';
}
.icon-weather-cloudy:before {
    content: '#{$i-weather-cloudy}';
}
.icon-lightning:before {
    content: '#{$i-lightning}';
}
.icon-code:before {
    content: '#{$i-code}';
}
.icon-atom:before {
    content: '#{$i-atom}';
}
.icon-compass:before {
    content: '#{$i-compass}';
}


//
// Div-based Icon Classes
// --------------------------------------------------

.icon-grab:before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 15px;
    background-size: 4px 4px;
    background-color: $midbrown;
    background-position: -1px -1px;
    background-image: linear-gradient(#fff 1px, transparent 1px),
        linear-gradient(90deg, #fff 1px, transparent 1px),
        linear-gradient(#fff 1px, transparent 1px),
        linear-gradient(90deg, #fff 1px, transparent 1px);
}